import React from "react";
import Checkbox from './UI/Checkbox'

class ListItem extends React.Component {
  render() {
    const { item } = this.props
    return (
      <div>
        <Checkbox onChange={this.completedChange}></Checkbox>
        <span style={{ textDecoration: item.completed ? 'line-through' : 'none'}}>{item.title}</span>
        <button onClick={this.handleClick}>删除</button>
      </div>
    )
  }

  completedChange = (checked) => {
    const {item, toggleCompleted} = this.props
    toggleCompleted(item.id)
  }

  handleClick = () => {
    const { item, deleteItem} = this.props
    this.props.deleteItem(item.id)
  }
}

export default ListItem